var oChart = echarts.init(document.getElementById('curve_show'));
var aList_all = [{
  'count': 36,
  'date': '2019-04-13'
}, {
  'count': 52,
  'date': '2019-04-14'
}, {
  'count': 78,
  'date': '2019-04-15'
}, {
  'count': 85,
  'date': '2019-04-16'
}, {
  'count': 65,
  'date': '2019-04-17'
}, {
  'count': 72,
  'date': '2019-04-18'
}, {
  'count': 88,
  'date': '2019-04-19'
}, {
  'count': 64,
  'date': '2019-04-20'
}, {
  'count': 72,
  'date': '2019-04-21'
}, {
  'count': 90,
  'date': '2019-04-22'
}, {
  'count': 96,
  'date': '2019-04-23'
}, {
  'count': 100,
  'date': '2019-04-24'
}, {
  'count': 102,
  'date': '2019-04-25'
}, {
  'count': 110,
  'date': '2019-04-26'
}, {
  'count': 123,
  'date': '2019-04-27'
}, {
  'count': 100,
  'date': '2019-04-28'
}, {
  'count': 132,
  'date': '2019-04-29'
}, {
  'count': 146,
  'date': '2019-04-30'
}, {
  'count': 200,
  'date': '2019-05-01'
}, {
  'count': 180,
  'date': '2019-05-02'
}, {
  'count': 163,
  'date': '2019-05-03'
}, {
  'count': 110,
  'date': '2019-05-04'
}, {
  'count': 80,
  'date': '2019-05-05'
}, {
  'count': 82,
  'date': '2019-05-06'
}, {
  'count': 70,
  'date': '2019-05-07'
}, {
  'count': 65,
  'date': '2019-05-08'
}, {
  'count': 54,
  'date': '2019-05-09'
}, {
  'count': 40,
  'date': '2019-05-10'
}, {
  'count': 45,
  'date': '2019-05-11'
}, {
  'count': 38,
  'date': '2019-05-12'
}, ];

let aCount = [];
let aDate = [];

for (var i = 0; i < aList_all.length; i++) {
  aCount.push(aList_all[i].count);
  aDate.push(aList_all[i].date);
}

var chartopt = {
  title: {
    text: '月新增文章数',
    left: 'center',
    top: '10'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['新增文章'],
    top: '40'
  },
  toolbox: {
    show: true,
    feature: {
      mark: {
        show: true
      },
      dataView: {
        show: true,
        readOnly: false
      },
      magicType: {
        show: true,
        type: ['line', 'bar']
      },
      restore: {
        show: true
      },
      saveAsImage: {
        show: true
      }
    }
  },
  calculable: true,
  xAxis: [{
    name: '日',
    type: 'category',
    boundaryGap: false,
    data: aDate
  }],
  yAxis: [{
    name: '月新增文章数',
    type: 'value'
  }],
  series: [{
    name: '新增文章',
    type: 'line',
    smooth: true,
    itemStyle: {
      normal: {
        areaStyle: {
          type: 'default'
        },
        color: '#f80'
      },
      lineStyle: {
        color: '#f80'
      }
    },
    data: aCount
  }],
  areaStyle: {
    normal: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        offset: 0,
        color: 'rgba(255,136,0,0.39)'
      }, {
        offset: .34,
        color: 'rgba(255,180,0,0.25)'
      }, {
        offset: 1,
        color: 'rgba(255,222,0,0.00)'
      }])

    }
  },
  grid: {
    show: true,
    x: 50,
    x2: 50,
    y: 80,
    height: 220
  }
};

oChart.setOption(chartopt);


var oPie = echarts.init(document.getElementById('pie_show'));
var oPieopt = {
  title: {
    top: 10,
    text: '分类文章数量比',
    x: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565'],
  legend: {
    x: 'center',
    top: 65,
    data: ['奇趣事', '会生活', '爱旅行', '趣美味']
  },
  toolbox: {
    show: true,
    x: 'center',
    top: 35,
    feature: {
      mark: {
        show: true
      },
      dataView: {
        show: true,
        readOnly: false
      },
      magicType: {
        show: true,
        type: ['pie', 'funnel'],
        option: {
          funnel: {
            x: '25%',
            width: '50%',
            funnelAlign: 'left',
            max: 1548
          }
        }
      },
      restore: {
        show: true
      },
      saveAsImage: {
        show: true
      }
    }
  },
  calculable: true,
  series: [{
    name: '访问来源',
    type: 'pie',
    radius: ['45%', '60%'],
    center: ['50%', '65%'],
    data: [{
      value: 300,
      name: '奇趣事'
    }, {
      value: 100,
      name: '会生活'
    }, {
      value: 260,
      name: '爱旅行'
    }, {
      value: 180,
      name: '趣美味'
    }]
  }]
};
oPie.setOption(oPieopt);



var oColumn = this.echarts.init(document.getElementById('column_show'));
var oColumnopt = {
  title: {
    text: '文章访问量',
    left: 'center',
    top: '10'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['奇趣事', '会生活', '爱旅行', '趣美味'],
    top: '40'
  },
  toolbox: {
    show: true,
    feature: {
      mark: {
        show: true
      },
      dataView: {
        show: true,
        readOnly: false
      },
      magicType: {
        show: true,
        type: ['line', 'bar']
      },
      restore: {
        show: true
      },
      saveAsImage: {
        show: true
      }
    }
  },
  calculable: true,
  xAxis: [{
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月']
  }],
  yAxis: [{
    name: '访问量',
    type: 'value'
  }],
  series: [{
    name: '奇趣事',
    type: 'bar',
    barWidth: 20,
    itemStyle: {
      normal: {
        areaStyle: {
          type: 'default'
        },
        color: '#fd956a'
      }
    },
    data: [800, 708, 920, 1090, 1200]
  }, {
    name: '会生活',
    type: 'bar',
    barWidth: 20,
    itemStyle: {
      normal: {
        areaStyle: {
          type: 'default'
        },
        color: '#2bb6db'
      }
    },
    data: [400, 468, 520, 690, 800]
  }, {
    name: '爱旅行',
    type: 'bar',
    barWidth: 20,
    itemStyle: {
      normal: {
        areaStyle: {
          type: 'default'
        },
        color: '#13cfd5'
      }
    },
    data: [500, 668, 520, 790, 900]
  }, {
    name: '趣美味',
    type: 'bar',
    barWidth: 20,
    itemStyle: {
      normal: {
        areaStyle: {
          type: 'default'
        },
        color: '#00ce68'
      }
    },
    data: [600, 508, 720, 890, 1000]
  }],
  grid: {
    show: true,
    x: 50,
    x2: 30,
    y: 80,
    height: 260
  },
  dataZoom: [ //给x轴设置滚动条
    {
      start: 0, //默认为0
      end: 100 - 1000 / 31, //默认为100
      type: 'slider',
      show: true,
      xAxisIndex: [0],
      handleSize: 0, //滑动条的 左右2个滑动条的大小
      height: 8, //组件高度
      left: 45, //左边的距离
      right: 50, //右边的距离
      bottom: 26, //右边的距离
      handleColor: '#ddd', //h滑动图标的颜色
      handleStyle: {
        borderColor: "#cacaca",
        borderWidth: "1",
        shadowBlur: 2,
        background: "#ddd",
        shadowColor: "#ddd",
      }
    }
  ]
};
oColumn.setOption(oColumnopt);